<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="format-detection" content="telephone=no">
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,  user-scalable=0">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="keywords" content=" web design html template">
      <meta name="date" content="Dec 26">
      <title>Invacat- parsonal Website Template</title>
      <!--------------- favicon img --------------->
      
      <!--------------- bootstrap css --------------->
      <link rel="stylesheet" href="static/css/bootstrap.min.css">
      <!--------------- animation css --------------->
      <link rel="stylesheet" href="static/css/animation.css">
      <!--------------- venobox css --------------->
      <link rel="stylesheet" href="static/css/venobox.min.css">
      <!--------------- slick css --------------->
      <link rel="stylesheet" href="static/css/slick.css">
      <!--------------- animation heading css --------------->
      <link rel="stylesheet" href="static/css/animation-heading.css">
      <!--------------- font-awasome css --------------->
      <link rel="stylesheet" href="static/css/fontawasome.css">
      <!--------------- main css --------------->
      <link rel="stylesheet" href="static/css/style.css">
      <!--------------- responsive css --------------->
      <link rel="stylesheet" href="static/css/responsiver.css">
   </head>
   <body>
      <!-- header-area -->
      <div class="header-area">
         <div class="container-fluid">
            <div class="row">
               <!-- menu content -->
               <div class="col-lg-4">
                  <div class="invacat-header-area">
                     <div class="invacat-header">
                        <nav class="submenu-content">
                           <ul>
                              <li><a href="">About</a></li>
                              <li>
                                 <a href="project.html">Work</a>
                                 <ul>
                                    <li><a href="project-grid.html">Project Grid</a></li>
                                    <li><a href="project.html">Project Filter</a></li>
                                    <li><a href="single-project.html">Single-Project</a></li>
                                 </ul>
                              </li>
                              <li>
                                 <a href="service.html">Service</a>
                                 <ul>
                                    <li><a href="single-service.html">Single Service</a></li>
                                    <li><a href="contact.html">Contact Page</a></li>
                                 </ul>
                              </li>
                           </ul>
                        </nav>
                     </div>
                  </div>
               </div>
               <!-- header logo  -->
               <div class="col-lg-4">
                  <div class="invacat-logo">
                     <a href="index.html"><img src="static/picture/logo.png" alt=""></a>
                  </div>
               </div>
               <!-- invacat-menu-bar -->
               <div class="col-lg-4">
                  <div class="invacat-button">
                     <div class="invacat-popupe">
                        <img src="static/picture/maneu.png" alt="">
                     </div>
                     <!-- popupe-content -->
                     <div class="popupe-menu">
                        <div class="invacat-icon">
                           <i class="fa-solid fa-xmark"></i>
                        </div>
                        <div class="popupe-discription">
                           <p>/ Contact us</p>
                           <h2>Invacat-Personal Bio info.</h2>
                           <p>Creating visual content, such as logos, brochures, infographics, and other branding materials</p>
                           <ul>
                              <li>
                                 <i class="fa-solid fa-location-dot"></i>
                                 <p>Chagrin Boulevard, OH 44124</p>
                              </li>
                              <li>
                                 <i class="fa-solid fa-envelope"></i>
                                 <p>demo@example.com</p>
                              </li>
                              <li>
                                 <i class="fa-solid fa-phone"></i>
                                 <p>+9 440 848 8222</p>
                              </li>
                           </ul>
                        </div>
                        <a class="invacat-button-popupe" href="contact.html">
                           <p>Get in touch</p>
                           <i class="fa-solid fa-arrow-right"></i>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- header end -->
      <!-- mobile menu -->
      <div id="invacat-mobile-nav">
         <div class="invact-logo">
            <div class="logo">
               <a href="index.html"><img src="static/picture/logo-i-w.png" alt=""></a>
            </div>
            <div class="menu-button"><span class="fa-solid fa-bars"></span></div>
         </div>
         <!-- mobile menu content -->
         <ul>
            <li><a href="">About</a></li>
            <li class="parent">
               <a href="project.html">Work</a>
               <ul>
                  <li><a href="project-grid.html">Project Grid</a></li>
                  <li><a href="project.html">Project Filter</a></li>
                  <li><a href="single-project.html">Single-Project</a></li>
               </ul>
            </li>
            <li class="parent">
               <a href="service.html">Service</a>
               <ul>
                  <li><a href="single-service.html">Single Service</a></li>
                  <li><a href="contact.html">Contact Page</a></li>
               </ul>
            </li>
         </ul>
      </div>
      <!-- End Mobile Menu -->
      <!-- breadcrumb area -->
      <div class="breadcrumb-area">
         <div class="container-fluid">
            <div class="row">
               <div class="col-lg-12">
                  <div class="breadcrumb-content">
                     <div class="breadcrumb-title">
                        <h1>About Us</h1>
                     </div>
                     <div class="breadcrumb-menu">
                        <nav aria-label="breadcrumb">
                           <ol class="breadcrumb text-aling-center">
                              <li class="breadcrumb-item"><a href="#">Home</a></li>
                              <li class="breadcrumb-item active" aria-current="page">About</li>
                           </ol>
                        </nav>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- breadcrumb end -->
      <!-- skill-area -->
      <div class="skill-area about-page">
         <div class="container">
            <div class="row">
               <!-- figma -->
               <div class="col-lg-3 col-md-6">
                  <div class="progess-wapper">
                     <div class="single-progess">
                        <div class="progess-inner">
                           <div id="circle"></div>
                           <img src="static/picture/Figma.png" alt="">
                        </div>
                        <div class="skill-content">
                           <h2>Figma</h2>
                           <h3>90%</h3>
                           <a href="#">Buy Now<i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- photoshop -->
               <div class="col-lg-3 col-md-6">
                  <div class="progess-wapper">
                     <div class="single-progess">
                        <div class="progess-inner">
                           <div id="circle02"></div>
                           <img src="static/picture/Photoshop.png" alt="">
                        </div>
                        <div class="skill-content">
                           <h2>Photoshop</h2>
                           <h4>90%</h4>
                           <a href="#">Buy Now<i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- xd -->
               <div class="col-lg-3 col-md-6">
                  <div class="progess-wapper">
                     <div class="single-progess">
                        <div class="progess-inner">
                           <div id="circle03"></div>
                           <img src="static/picture/Experience.png" alt="">
                        </div>
                        <div class="skill-content">
                           <h2>XD</h2>
                           <h5>90%</h5>
                           <a href="#">Buy Now<i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- Illustrator -->
               <div class="col-lg-3 col-md-6">
                  <div class="progess-wapper">
                     <div class="single-progess">
                        <div class="progess-inner">
                           <div id="circle04"></div>
                           <img src="static/picture/Illustrator.png" alt="">
                        </div>
                        <div class="skill-content">
                           <h2>Illustrator</h2>
                           <h1>90%</h1>
                           <a href="#">Buy Now<i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- skill-area end -->
      <!-- testimonial-area -->
      <div class="testimonial-area">
         <div class="container">
            <div class="row">
               <div class="testi-section">
                  <img src="static/picture/testi-man.png" alt="">
                  <p>“This hotly anticipated debut novel takes on topics both timely and tragically universal school shootings, love, loss, forgiveness, and pain.”</p>
               </div>
               <div class="testi-content">
                  <img src="static/picture/testi-s-shape.png" alt="">
                  <h2>Arlen dogen</h2>
                  <p>Freelancer expert</p>
               </div>
               <div class="testi-image">
                  <img src="static/picture/testi-shape.png" alt="">
               </div>
            </div>
         </div>
      </div>
      <!-- testimonial-area end -->
      <!-- faq-area -->
      <div class="faq-area">
         <div class="container">
            <div class="row">
               <!-- faq-content -->
               <div class="col-lg-12">
                  <div class="faq-content">
                     <div class="col-lg-12">
                        <div class="section-title">
                           <p>OUR EXPERIENCES</p>
                           <h1><span>Frequently </span>Asked Questions</h1>
                        </div>
                     </div>
                     <div class="accordion accordion-flush" id="accordionFlushExample">
                        <!-- single-faq 01 -->
                        <div class="accordion-item">
                           <h2 class="accordion-header" id="flush-headingOne">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                              Front-End WordPress Developer
                              </button>
                           </h2>
                           <div id="flush-collapseOne" class="accordion-collapse collapse " aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                              <div class="accordion-body faq-discription">
                                 <h4>2010-2012</h4>
                                 Such as screen size and orientation, and ensures that the app is optimized for performance and usability. In order to create an effective mobile application design. consectetuer adipiscing elit. Aenean commodo ligula eget dolor I'm Creative Director and UI-UX Designer from Sydney, Australia, working in web development and print media.
                                 I enjoy turning complex problems into simple, beautiful and intuitive designs. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies..
                              </div>
                           </div>
                        </div>
                        <!-- single-faq 02 -->
                        <div class="accordion-item">
                           <h2 class="accordion-header" id="flush-headingTwo">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                              How much time will I save on a renovation?
                              </button>
                           </h2>
                           <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                              <div class="accordion-body faq-discription">
                                 <h4>2010-2012</h4>
                                 Such as screen size and orientation, and ensures that the app is optimized for performance and usability. In order to create an effective mobile application design. consectetuer adipiscing elit. Aenean commodo ligula eget dolor I'm Creative Director and UI-UX Designer from Sydney, Australia, working in web development and print media.
                                 I enjoy turning complex problems into simple, beautiful and intuitive designs. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies..
                              </div>
                           </div>
                        </div>
                        <!-- single-faq 03 -->
                        <div class="accordion-item">
                           <h2 class="accordion-header" id="flush-headingThree">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                              Material are used for house building?
                              </button>
                           </h2>
                           <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                              <div class="accordion-body faq-discription">
                                 <h4>2010-2012</h4>
                                 Such as screen size and orientation, and ensures that the app is optimized for performance and usability. In order to create an effective mobile application design. consectetuer adipiscing elit. Aenean commodo ligula eget dolor I'm Creative Director and UI-UX Designer from Sydney, Australia, working in web development and print media.
                                 I enjoy turning complex problems into simple, beautiful and intuitive designs. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies..
                              </div>
                           </div>
                        </div>
                        <!-- single-faq 04 -->
                        <div class="accordion-item">
                           <h2 class="accordion-header" id="flush-headingfour">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapsefour" aria-expanded="false" aria-controls="flush-collapsefour">
                              Building much I save on a renovation??
                              </button>
                           </h2>
                           <div id="flush-collapsefour" class="accordion-collapse collapse" aria-labelledby="flush-headingfour" data-bs-parent="#accordionFlushExample">
                              <div class="accordion-body faq-discription">
                                 <h4>2010-2012</h4>
                                 Such as screen size and orientation, and ensures that the app is optimized for performance and usability. In order to create an effective mobile application design. consectetuer adipiscing elit. Aenean commodo ligula eget dolor I'm Creative Director and UI-UX Designer from Sydney, Australia, working in web development and print media.
                                 I enjoy turning complex problems into simple, beautiful and intuitive designs. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies..
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- faq-end -->
      <!-- footer area -->
      <div class="footer-area">
         <div class="container">
            <div class="row">
               <!-- about-content -->
               <div class="col-lg-4 col-md-6">
                  <div class="single-about">
                     <div class="about-content">
                        <h2>About us</h2>
                        <p>Working exclusively as a quarespace design and developer since early 2016, and my know ledge as a front-end developer all to push this platform further.</p>
                     </div>
                     <div class="abouts-icon">
                        <ul>
                           <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
                           <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                           <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <!-- newslatter -->
               <div class="col-lg-4 col-md-6 footer-contact">
                  <div class="call-number">
                     <div class="call-address">
                        <img src="static/picture/Comment.png" alt="">
                        <p>If you have questions you can contact us?</p>
                        <a href="contact.html">Contact us</a>
                     </div>
                     <div class="call-num">
                        <p>Or call us</p>
                        <h2>+1 800 642 94 31</h2>
                     </div>
                  </div>
               </div>
               <!-- quick-link -->
               <div class="col-lg-4 col-md-6">
                  <div class="quick-link">
                     <h2>Quick Link</h2>
                     <ul>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Privicy</a></li>
                        <li><a href="#">Free website </a></li>
                        <li><a href="#">Careear</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- footer end -->
      <!---------------------  JS area --------------------------->
      <script src="static/js/jquery.min.js"></script>
      <!--------------------- bootstrap js --------------------------->
      <script src="static/js/bootstrap.min.js"></script>
      <!--------------------- slick js --------------------------->
      <script src="static/js/slick.min.js"></script>
      <!--------------------- waypoint js --------------------------->
      <script src="static/js/waypoint.js"></script>
      <!--------------------- counterup js --------------------------->
      <script src="static/js/counterup.min.js"></script>
      <!--------------------- animation-heading js --------------------------->
      <script src="static/js/animation-heading.js"></script>
      <!--------------------- ajax-mail js --------------------------->
      <script src="static/js/ajax-mail.js"></script>
      <!--------------------- venobox js --------------------------->
      <script src="static/js/venobox.min.js"></script>
      <!--------------------- circle-progress js --------------------------->
      <script src="static/js/circle-progress.js"></script>
      <!--------------------- circle-progress js --------------------------->
      <script src="static/js/jquery.scrollUp.js"></script>
      <!--------------------- scrollUp js --------------------------->
      <script src="static/js/isotope.pkgd.min.js"></script>
      <!--------------------- main js --------------------------->
      <script src="static/js/main.js"></script>
   </body>
</html>